<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Create Compute Pool</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

<div class="container">
  <div class="section">
    <div class="row">
      <div class="col m6 push-m2" id="main-panel">
        <div class="row">
          <div class="input-field col m5">
            <input type="text" id="pool-name" placeholder="Compute pool name" class="validate">
            <label for="pool-name" id="name-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m6">
              <select name="network" id="pool-network">
              </select>
              <label id="network-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m6">
              <select name="storage" id="pool-storage">
              </select>
              <label id="storage-label"></label>
          </div>
        </div>
        <div class="row">
          <span id="failover-label"></span>
          <div class="switch" id="failover-div">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="section">
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
          <div class="col m2 right" id="button">
              <button class="waves-effect waves-light blue-grey lighten-2 btn" onclick="createPool()" id="create-caption">
                <i class="material-icons right">add</i>
              </button>
          </div>
      </div>
  </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
N.ValidateSession();
var texts = N.GetTexts();
$('#back-caption').append(texts.get(N.TagBack));
$('#create-caption').prepend(texts.get(N.TagCreate));

$('#name-label').text(texts.get(N.TagName));
$('#network-label').text(texts.get(N.TagAddressPool));
$('#storage-label').text(texts.get(N.TagStoragePool));
$('#failover-label').text(texts.get(N.TagFailover));
$('#failover-div').append(
  $('<label>').append(texts.get(N.TagOff)).append(
    $('<input>').attr('type', 'checkbox').attr('id', 'failover-switch')
  ).append(
    $('<span>').addClass('lever')
  ).append(texts.get(N.TagOn))
);

var localStorageText = "use local storage";
var noNetworkText = "don't use address pool";
if (N.zh_CN == N.GetLanguage()){
  localStorageText = "使用本地存储";
  noNetworkText = "不使用地址池";
}

M.AutoInit();

function loadOptions(){
  //load storage options
  $.getJSON("/storage_pools/", function(result){
    if (0 != result['error_code']) {
        M.toast({html: 'query storage pools fail:' + result['message']});
        return;
    }
    var storages = result['data'];
    var storageOptions = $('#pool-storage');
    storageOptions.append(
      $('<option>').attr('value', "").text(localStorageText).prop('selected', true)
    );
    if (!storages){
      M.FormSelect.init($('#pool-storage'));
      return;
    }
    storages.forEach((storage) =>{
      $('#pool-storage').append(
        $('<option>').attr('value', storage['name']).text(storage['name'] + ' ('+ storage['type'] +')')
      )
    });
    M.FormSelect.init($('#pool-storage'));

  });
  $.getJSON(
    "/address_pools/",
    function(result){
      if (0 != result['error_code']) {
          M.toast({html: 'query address pool fail:' + result['message']});
          return;
      }
      var networks = result['data'];
      var networkOptions = $('#pool-network');
      networkOptions.append(
        $('<option>').attr('value', "").text(noNetworkText).prop('selected', true)
      );

      if (!networks){
        M.FormSelect.init(networkOptions);
        return;
      }
      networks.forEach((network)=>{
        var option = $('<option>').attr('value', network['name']).text(network['name']);
        networkOptions.append(option);
      });
      M.FormSelect.init(networkOptions);
    });
}

function createPool(){
  var poolName = $('#pool-name').val();
  var poolStorage = $('#pool-storage').val();
  var poolNetwork = $('#pool-network').val();
  if (!poolName){
    M.toast({html: "please input pool name"});
    return;
  }

  var request = new Object();
  request.storage = poolStorage;
  var storageText = poolStorage;
  if ('' == poolStorage){
    storageText = localStorageText;
  }
  request.network = poolNetwork;
  var networkText = poolNetwork;
  if ('' == poolNetwork){
    networkText = noNetworkText;
  }

  request.failover = $('#failover-switch').prop('checked');
  var failoverText = texts.get(N.TagDisable);
  if (request.failover){
    failoverText = texts.get(N.TagEnable);
  }

  $('#button').empty();
  $('#main-panel').empty();

  var table = $('<table>').addClass('striped');
  table.append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagComputePool))
    ).append(
      $('<td>').text(poolName)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagAddressPool))
    ).append(
      $('<td>').text(networkText)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagStoragePool))
    ).append(
      $('<td>').text(storageText)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagFailover))
    ).append(
      $('<td>').text(failoverText)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagResult))
    ).append(
      $('<td>').attr('id', 'request-result')
    )
  );
  $('#main-panel').append(table);


  $.post(
    '/compute_pools/'+ poolName,
    JSON.stringify(request),
    function(result){
      if (0 != result['error_code']) {
        $('#request-result').text(result['message']);
        return;
      }
      $('#request-result').text('success');
      $('#button').append(
        $('<a>').attr('href', 'compute_pools.html').append(
          $('<button>').addClass('waves-effect waves-light blue-grey lighten-2 btn').text(texts.get(N.TagFinish)).prepend(
            $('<i>').addClass('material-icons').text('check')
          )
        )
      );
      N.WriteOperateLog('create new compute pool ' + poolName);
    },
    "json"
  );

}

$(function(){
  loadOptions();
});


</script>
</body>
</html>
